<template>
  <div class="expitembox itemh mbox">
    <div class="container">
      <div class="bgbox" ref="bgbox">
        <div class="bg clmcenter" :style="{ width: bgW + 'px' }">
          <img
            src="@/assets/img/CN/itemH/bg.jpg"
            class="bgimg"
            ref="bgimg"
            @load="bgLoaded"
          />
          <img
            src="@/assets/img/point.gif"
            class="point point1"
            @click="point1show = true"
          />
          <img
            src="@/assets/img/point.gif"
            class="point point2"
            @click="point2show = true"
          />
        </div>
      </div>
    </div>
    <!-- 自动弹窗 -->
    <EnterDialog
      @closedialog="closeDialog"
      v-show="entershow"
      :src="require('@/assets/img/EN/itemH/c0.png')"
    />
    <!-- 触点1 -->
    <div class="tkbox tkboxA clmcenter" v-show="point1show">
      <img
        src="@/assets/img/close.png"
        class="close"
        @click="point1show = false"
      />
      <div class="tkinfobox clmcenter">
        <img src="@/assets/img/EN/itemH/c1.png" />
      </div>
    </div>
    <!-- 触点2 -->
    <div class="tkbox tkbox2 clmstart" v-if="point2show">
      <img
        src="@/assets/img/close.png"
        class="close"
        @click="point2show = false"
      />
      <div class="title w1">
        <img src="@/assets/img/CN/itemH/level.png" class="level" />
        <span>In pictures: details revealed with SEM</span>
      </div>
      <div class="tabbox w1">
        <van-tabs
          v-model="tab"
          background="none"
          color="#ffffff"
          line-width="0"
          line-height="0"
          title-active-color="#ffffff"
          title-inactive-color="#ffffff"
        >
          <van-tab>
            <template #title>Test1</template>
            <Test1 />
          </van-tab>
          <van-tab>
            <template #title>Test2</template>
            <Test2 />
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 左右滑动提示 -->
    <ViewTips :lang="'en'" v-show="tipshow" />
  </div>
</template>
<script>
import { importDialog } from "@/mixin.js";
import Test1 from "./components/Test1.vue";
import Test2 from "./components/Test2.vue";
import ViewTips from "@/components/ViewTips.vue";
export default {
  data() {
    return {
      point1show: false, //触点1
      point2show: false, //触点2
      tab: 0,
      bgW: 0,tipshow: false, // 左右滑动提示
    };
  },
  methods: {
    // 关闭自动弹窗
    closeDialog() {
      this.entershow = false;
      this.tipshow = true;
      let timer = setTimeout(() => {
        this.tipshow = false;
        clearTimeout(timer);
      }, 2000);
    },
    bgLoaded() {
      this.bgW = this.$refs.bgimg.offsetWidth;
      this.$nextTick(() => {
        this.$refs.bgbox.scrollLeft = this.bgW / 4;
      });
    },
  },
  components: {
    Test1,
    Test2,
    ViewTips,
  },
  mixins: [importDialog],
};
</script>
<style lang="less">
.expitembox {
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .bgbox {
      width: 100%;
      height: 100%;
      overflow-x: scroll;
      .bg {
        position: relative;
        height: 100%;
        .bgimg {
          height: 100%;
          pointer-events: none;
        }
        .point {
          position: absolute;
          width: 70px;
        }
      }
    }
    .goback {
      position: absolute;
      top: 3rem;
      left: 3rem;
    }
  }
  .tkbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99;
  }
  .tkboxA {
    .close {
      position: absolute;
      right: 3rem;
      top: 3rem;
      width: 34px;
      height: 34px;
      cursor: pointer;
    }
    .cimg {
      width: 640px;
      margin-top: 12rem;
      vertical-align: middle;
    }
  }
}
</style>

<style lang="less" scoped>
.itemh {
  font-family: "Helvetica";
  .container {
    .bgbox {
      .bg {
        .point1 {
          margin-bottom: 15rem;
          margin-right: 23rem;
        }
        .point2 {
          margin-left: 30rem;
          margin-bottom: 10rem;
        }
      }
    }
  }
  .tkbox {
    .tkinfobox {
      img {
        width: 640px;
      }
    }
  }
  .tkbox2 {
    .close {
      position: absolute;
      top: 3rem;
      right: 3rem;
      width: 34px;
      height: 34px;
      cursor: pointer;
    }
    .w1 {
      width: 634px;
    }
    .title {
      margin-top: 3rem;
      font-weight: bold;
      span {
        font-size: 1.8rem;
        color: #fff;
        padding-left: 0.5rem;
      }
    }
    .tabbox {
      margin: 2rem 0;
    }
  }
}
@media only screen and (min-height: 1400px) {
  .itemh {
    .tkbox {
      justify-content: center;
    }
  }
}
</style>
<style>
.tabbox .van-tab {
  width: 146px;
  height: 45px;
  line-height: 45px;
  font-size: 1.6rem;
  margin: 0 1rem;
  background: url("@/assets/img/CN/itemH/b-default.png") no-repeat top center;
  background-size: 100% 100%;
  display: table;
  text-align: center;
}
.tabbox .van-tab--active {
  background: url("@/assets/img/CN/itemH/b-active.png") no-repeat top center;
  background-size: 100% 100%;
}
.tabbox .van-tabs--line .van-tabs__wrap {
  width: calc(146px * 2 + 4rem);
  height: 45px;
  margin: 0 auto;
}

.tabbox .van-tabs__nav--line {
  height: 0;
  border-style: 0;
}
</style>
